<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style type="text/css">
        button{
            font-size: 2em;
        }
        input{
            margin-top: 2px;
            margin-left: 2px;
            width: 240px;
            height: 50px;
            text-align: center;
            font-size: 2em;
        }
        button{
            width: 60px;
            height: 50px;
        }
    </style>
    <script type="text/javascript">
        function inputEvent(e) {
            var val = e.innerHTML
            input.value+=val
        }
        function inputOper() {
            input.value = eval(input.value)     //eval函数用于计算
        }
        function clearNum() {
            input.value = ""
        }
        function backNum() {
            input.value = input.value.substring(0,input.value.length-1)
        }
    </script>
</head>

<body>
    <input type="text" id="input">
    <br>
    <table>
        <tr>
            <td><button onclick="inputEvent(this)">1</button></td>
            <td><button onclick="inputEvent(this)">2</button></td>
            <td><button onclick="inputEvent(this)">3</button></td>
            <td><button onclick="inputEvent(this)">+</button></td>
        </tr>
        <tr>
            <td><button onclick="inputEvent(this)">4</button></td>
            <td><button onclick="inputEvent(this)">5</button></td>
            <td><button onclick="inputEvent(this)">6</button></td>
            <td><button onclick="inputEvent(this)">-</button></td>
        </tr>
        <tr>
            <td><button onclick="inputEvent(this)">7</button></td>
            <td><button onclick="inputEvent(this)">8</button></td>
            <td><button onclick="inputEvent(this)">9</button></td>
            <td><button onclick="inputEvent(this)">*</button></td>
        </tr>
        <tr>
            <td><button onclick="inputEvent(this)">0</button></td>
            <td><button onclick="inputEvent(this)">.</button></td>
            <td><button onclick="inputOper(this)">=</button></td>
            <td><button onclick="inputEvent(this)">/</button></td>
        </tr>
        <tr>
            <td></td>
            <td><button onclick="clearNum()">CE</button></td>
            <td><button onclick="backNum()"><-</button></td>
            <td></td>
        </tr>
    </table>
</body>
</html>